<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Virtual Keyboard Test</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <link rel="stylesheet" href="../style.css" />
    <link rel="icon" href="data:," />
    <style>
      body {
        /* --keyboard-background: linear-gradient(#e66465, #9198e5); 
         --keyboard-background: linear-gradient(white, #cacfd7); */
        /* --box-placeholder-color: red; */
      }
      math-field,
      textarea {
        margin-top: 1em;
        margin-bottom: 1em;
        min-width: 400px;
      }

      @media not (pointer: coarse) {
        body.is-toggle-hidden math-field::part(virtual-keyboard-toggle) {
          display: none;
        }
      }
    </style>
  </head>
  <body theme="light">
    <header>
      <h1>Virtual Keyboard Test</h1>
      <ul>
        <li><a href="../smoke/">Smoke</a></li>
        <li class="current">
          <a href="../virtual-keyboard/">Virtual Keyboard</a>
        </li>
        <li>
          <a href="../mathfield-states/">States</a>
        </li>
        <li>
          <a href="../prompts/">Prompts</a>
        </li>
      </ul>
    </header>
    <main>
      <math-field id="mf-1">f(x)=\frac{1}{x+1}}</math-field>
      <math-field id="mf-2"
        >1+\texttip{a}{hello world}+b+\alpha+\mathtip{\alpha+\gamma}{x=\frac34}+
        \frac{a+1} {b+\mathtip{\alpha+\gamma}{x=\frac34} }+
        \frac{a+1}{b+\alpha+\gamma}</math-field
      >

      <textarea readonly disabled id="ta-1">hello world</textarea>
      <!-- <math-field id="mf" virtual-keyboard-mode="manual" readonly
        >f(x)= \placeholder[id1][x]{}</math-field
      > -->

      <!-- <math-field id="mf-prompt" readonly
        >x=\frac{\placeholder[numer]{}}{\placeholder[denom][correct]{3}</math-field
      > -->
      <math-field id="mf-prompt" readonly virtual-keyboard-mode="onfocus"
        >x=\frac{\placeholder[numer]{}}{\placeholder[denom][correct]{3}</math-field
      >

      <math-field readonly id="mf-ro">x=\frac{3}{4}</math-field>

      <textarea id="ta-2"></textarea>

      <div class="buttonbar">
        <button id="show-keyboard">Show Keyboard</button>
        <button id="hide-keyboard">Hide Keyboard</button>
        <button id="freeze-keyboard">Freeze Keyboard</button>
        <button id="unfreeze-keyboard">Unfreeze Keyboard</button>
        <button id="custom-keyboard">Custom Keyboard</button>
        <button id="default-keyboard">Default Keyboard</button>
        <button id="toggle-toggle">Toggle Button</button>
      </div>
    </main>

    <script type="module">
      import { MathfieldElement } from '/dist/mathlive.mjs';
      let keyboardFrozen = false;

      const kbd = window.mathVirtualKeyboard;
      kbd.shiftKeycap = { label: 'Shift' };
      kbd.actionKeycap = { label: 'Continue', class: 'action primary small' };
      kbd.backspaceKeycap = {
        label: 'Backspace',
        class: 'action small hide-shift',
      };
      // kbd.layouts = 'minimalist';
      // kbd.alphabeticLayout = 'dvorak';
      // k.addEventListener('virtual-keyboard-toggle', (ev) =>
      //   console.log('toggling ', ev)
      // );

      kbd.addEventListener('before-virtual-keyboard-toggle', (ev) => {
        if (keyboardFrozen && kbd.visible) ev.preventDefault();
      });

      document
        .getElementById('show-keyboard')
        .addEventListener('click', () => kbd.show());
      document
        .getElementById('hide-keyboard')
        .addEventListener('click', () => kbd.hide());
      document
        .getElementById('custom-keyboard')
        .addEventListener('click', () => {
          mathVirtualKeyboard.layouts = makeVirtualKeyboard([]); // 'minimalist';
        });

      document
        .getElementById('default-keyboard')
        .addEventListener('click', () => {
          mathVirtualKeyboard.layouts = 'default';
        });

      document
        .getElementById('toggle-toggle')
        .addEventListener('click', () =>
          document.body.classList.toggle('is-toggle-hidden')
        );

      document
        .getElementById('freeze-keyboard')
        .addEventListener('click', () => {
          keyboardFrozen = true;
          document.getElementById('freeze-keyboard').classList.add('hidden');
          document
            .getElementById('unfreeze-keyboard')
            .classList.remove('hidden');
        });
      document.getElementById('unfreeze-keyboard').classList.add('hidden');
      document
        .getElementById('unfreeze-keyboard')
        .addEventListener('click', () => {
          keyboardFrozen = false;
          document.getElementById('unfreeze-keyboard').classList.add('hidden');
          document.getElementById('freeze-keyboard').classList.remove('hidden');
        });

      document
        .getElementById('mf-prompt')
        .addEventListener('placeholder-change', (ev) => {
          console.log('placeholder-change', ev.detail);
        });

      updateButtons();

      // document.querySelectorAll('math-field, textarea').forEach((x) => {
      //   x.addEventListener('beforeinput', logEvent);
      //   x.addEventListener('input', logEvent);
      //   x.addEventListener('keypress', logEvent);
      //   x.addEventListener('keydown', logEvent);
      //   x.addEventListener('keyup', logEvent);
      //   x.addEventListener('click', logEvent);
      //   x.addEventListener('focus', logEvent);
      //   x.addEventListener('focusin', logEvent);
      //   x.addEventListener('focusout', logEvent);
      //   x.addEventListener('move-out', logEvent);
      //   x.addEventListener('focus-in', logEvent);
      //   x.addEventListener('focus-out', logEvent);
      //   x.addEventListener('blur', logEvent);
      // });

      kbd.addEventListener('geometrychange', logEvent);
      kbd.addEventListener('virtual-keyboard-toggle', logEvent);
      kbd.addEventListener('before-virtual-keyboard-toggle', logEvent);

      function logEvent(evt) {
        const stackTraceFrames = String(new Error().stack)
          .replace(/^Error.*\n/, '')
          .split('\n')
          .map((x) => x.replace(/\(.*\)/, ''));
        stackTraceFrames.shift();

        console.log(evt.type, (evt.target?.id || evt.target?.tagName) ?? evt);
        if (stackTraceFrames.length > 0)
          console.log(stackTraceFrames.join('\n'));
        // console.log(evt);
        updateButtons();
      }

      // mathVirtualKeyboard.layouts = {
      //     rows: [
      //       [
      //         'a',
      //         'b',
      //         { class: 'separator w5' },
      //         '7',
      //         '8',
      //         '9',
      //         '\\div',
      //         { class: 'separator w5' },
      //         {
      //           class: 'tex',
      //           label: '<span><i>x</i>&thinsp;²</span>',
      //           insert: '$$#@^{2}$$',
      //         },
      //         {
      //           class: 'tex',
      //           label: '<span><i>x</i><sup>&thinsp;<i>n</i></sup></span>',
      //           insert: '$$#@^{}$$',
      //         },
      //         {
      //           class: 'small',
      //           latex: '\\sqrt{#0}',
      //           insert: '$$\\sqrt{#0}$$',
      //         },
      //       ],
      //       [
      //         'c',
      //         'd',
      //         { class: 'separator w5' },
      //         '4',
      //         '5',
      //         '6',
      //         '\\times',
      //         { class: 'separator w5' },
      //         '\\frac{#0}{#0}',
      //         { class: 'separator' },
      //         { class: 'separator' },
      //       ],
      //       [
      //         'x',
      //         'y',
      //         { class: 'separator w5' },

      //         '1',
      //         '2',
      //         '3',
      //         '-',
      //         { class: 'separator w5' },
      //         { class: 'separator' },
      //         { class: 'separator' },
      //         { class: 'separator' },
      //       ],
      //       [
      //         '(',
      //         ')',

      //         { class: 'separator w5' },
      //         '0',
      //         '.',
      //         '\\pi',
      //         '+',
      //         { class: 'separator w5' },
      //         {
      //           class: 'action',
      //           label:
      //             "<svg class=svg-glyph><use xlink:href='#svg-arrow-left' /></svg>",
      //           command: ['performWithFeedback', 'moveToPreviousChar'],
      //         },
      //         {
      //           class: 'action',
      //           label:
      //             "<svg class=svg-glyph><use xlink:href='#svg-arrow-right' /></svg>",
      //           command: ['performWithFeedback', 'moveToNextChar'],
      //         },
      //         {
      //           class: 'action font-glyph right',
      //           label: '&#x232b;',
      //           command: ['performWithFeedback', 'deleteBackward'],
      //         },
      //       ],
      // };

      // mathVirtualKeyboard.layouts = [
      //   {
      //     label: 'Minimal', // Label displayed in the Layout Switcher
      //     tooltip: 'Only the essentials!',
      //     rows: [
      //       [
      //         '+',
      //         '-',
      //         '\\times',
      //         '\\frac{#@}{#?}',
      //         '=',
      //         '.',
      //         '(',
      //         ')',
      //         '\\sqrt{#0}',
      //         '#@^{#?}',
      //       ],
      //       ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
      //     ],
      //   },
      // ];

      function makeVirtualKeyboard(variables) {
        // const extraSpecificity = `.ML__keyboard .minimalist-backdrop`;
        // const customKeys = symbolsToKeycaps(variables);
        const extraSpecificity = '';
        return {
          label: '',
          layers: [
            {
              style: `
                      .ML__keyboard {
                        --keyboard-zindex: 2000;

                      }
                      .minimalist-backdrop {
                        display: flex;
                        justify-content: center;
                      }
                      ${extraSpecificity} .minimalist-container {
                        --keycap-height: 45px;
                        --keycap-max-width: 53px;
                        --keycap-font-size: 20px;
                        --keycap-small-font-size: 12px;
                        --keyboard-background: #f2f2f2;
                        --keycap-background-hover: #ffffff;

                        --keycap-secondary-background: #e5e5e5;
                        --keycap-secondary-background-hover: #c4c4c4;

                        --placeholder-opacity: 1;

                        padding: 15px;

                        background: var(--keyboard-background);
                        border-top-left-radius: 8px;
                        border-top-right-radius: 8px;
                        border: none;
                        box-shadow: 0px 0px 40px 0px #00000033;

                      }

                      @container (max-width: 744px) {
                        ${extraSpecificity} .minimalist-container {
                          padding: 4px;
                        }

                        ${extraSpecificity} .MLK__rows {
                          --keycap-gap: 5px;
                          --keycap-height: 45px;
                        }
                      }

                      ${extraSpecificity} .minimalist-container .action {
                        box-shadow: 0px 1px 0px #b5b5b5;
                        color: var(--keycap-text);
                        border: none;
                      }

                      ${extraSpecificity} .minimalist-container .action.is-pressed {
                        transform-origin: bottom center;
                        transform: scale(1.4, 1.4);
                        background-color: var(--keycap-secondary-background-hover);
                        color: var(--keycap-text);
                      }

                      ${extraSpecificity} .minimalist-container .action.is-active {
                        background-color: var(--keycap-secondary-background-hover);
                        color: var(--keycap-text);
                      }

                      ${extraSpecificity} .minimalist-container .MLK__keycap:not(.ghost) {
                        box-shadow: 0px 1px 0px #b5b5b5;
                        color: var(--keycap-text);
                        border: none;
                      }

                      ${extraSpecificity} .minimalist-container .MLK__keycap.is-pressed {
                        transform-origin: bottom center;
                        transform: scale(1.4, 1.4);
                        background-color: var(--keycap-background-hover);
                        color: var(--keycap-text);
                      }

                      // ${extraSpecificity} .minimalist-container .MLK__keycap.is-active {
                      //   background-color: var(--keycap-background-hover);
                      //   color: var(--keycap-text);
                      // }

                      ${extraSpecificity} .MLK__rows {
                        overflow-x: unset;
                      }

                      // ${extraSpecificity} .MLK__rows .row {
                      //   justify-content: flex-start;
                      // }

                      // ${extraSpecificity} .if-can-undo, ${extraSpecificity} .if-can-redo {
                      //   opacity: 0.4;
                      // }

                      // .ML__keyboard.can-undo .if-can-undo, .ML__keyboard.can-redo .if-can-redo {
                      //   opacity: 1;
                      // }
                    `,
              backdrop: 'minimalist-backdrop',
              container: 'minimalist-container',
              rows: [
                // customKeys,
                // customKeys.length > 0 ? ['[hr]'] : [],
                [
                  '+',
                  '-',
                  '\\times',
                  {
                    insert: '\\frac{#@}{#0}',
                    latex: '\\frac{#?}{#?}',
                    class: 'small',
                  },
                  '=',
                  '[.]',
                  '(',
                  ')',
                  { latex: '\\sqrt{#0}', class: 'small' },
                  { insert: '#@^{#?}', class: 'small', latex: '#?^{#?}' },
                ],
                ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
                ['[hr]'],
                [
                  { label: '[undo]' },
                  '[redo]',
                  '[separator]',
                  '[separator]',
                  '[separator]',
                  { label: '[separator]', width: 1.5 },
                  '[left]',
                  '[right]',
                  { label: '[backspace]', class: 'action hide-shift' },
                ],
              ],
            },
          ],
        };
      }

      function updateButtons() {
        if (kbd.visible) {
          document.getElementById('hide-keyboard').classList.remove('hidden');
          document.getElementById('show-keyboard').classList.add('hidden');
        } else {
          document.getElementById('hide-keyboard').classList.add('hidden');
          document.getElementById('show-keyboard').classList.remove('hidden');
        }
      }
    </script>
  </body>
</html>
